<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="nba.jpg" width="400" height="250">
    <script>
        function getFinalStyle(element, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(element, null)[attr];
            }else{
                return element.currentStyle[attr];
            }
        }
        function slowMove(element, attr, target){
            clearInterval(element.timer);
            var iSpeed = 0, iStyleVal = 0;
            element.timer = setInterval(function(){
                if(attr === "opacity"){
                    iStyleVal = getFinalStyle(element, attr);
                    iStyleVal = iStyleVal === undefined ? 100 : Math.round(iStyleVal * 100); //兼容IE8-透明度不写读取时出现undefined
                }else{
                    iStyleVal = parseInt(getFinalStyle(element, attr));
                }
                iSpeed = (target - iStyleVal) / 5;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                iStyleVal += iSpeed;
                if(attr === "opacity"){
                    element.style[attr] = iStyleVal/100;
                    element.style.filter = "alpha(opacity: " + iStyleVal + ")";
                }else{
                    element.style[attr] = iStyleVal + "px";
                }
                if(iStyleVal === target){
                    clearInterval(element.timer);
                }
            }, 30);
        }

        var oImg = document.querySelector("img");
        oImg.onmouseover = function(){
//            slowMove(oImg, "opacity", 30);
            slowMove(oImg, "width", 800);
        };
        oImg.onmouseout = function(){
//            slowMove(oImg, "opacity", 100);
            slowMove(oImg, "width", 400);
        };
    </script>
</body>
</html>